<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>班级课程管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索 添加 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getClassCourseList()">
            <el-button slot="append" icon="el-icon-search" @click="getClassCourseList()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加课表</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="classList" border stripe>
        <!-- stripe: 斑马条纹
        border：边框-->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="className" label="班级"></el-table-column>
<!--        <el-table-column prop="teacherId" label=""></el-table-column>-->
        <el-table-column label="课程">
          <template  slot-scope="scope">
            <el-button v-for="(item,index) in scope.row.haveDirection" :key="index" type="primary" @click="checkDetail(scope.row,$event)">{{ item }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totle"
      ></el-pagination>
    </el-card>

    <!-- 添加课表的对话框 -->
    <el-dialog title="添加课表" :visible.sync="addDialogVisible" width="50%" @close="addDialogClosed">
      <!-- 内容主体 -->
      <el-form
        :model="addUserForm"
        ref="addUserFormRef"
        :rules="addCourseFormRules"
        label-width="100px"
      >
        <el-form-item label="班级名称" prop="className">
          <el-input v-model="addUserForm.className"></el-input>
        </el-form-item>
        <el-form-item label="专业方向" prop="college">
          <el-input v-model="addUserForm.college"></el-input>
        </el-form-item>
        <!-- 周一课程 -->
        <el-divider class="day">周一</el-divider>
        <el-form-item label="第一节课">
          <el-input v-model="addUserForm.mondayFirst"></el-input>
        </el-form-item>
        <el-form-item label="第二节课">
          <el-input v-model="addUserForm.mondaySecond"></el-input>
        </el-form-item>
        <el-form-item label="第三节课">
          <el-input v-model="addUserForm.mondayThird"></el-input>
        </el-form-item>
        <el-form-item label="第四节课">
          <el-input v-model="addUserForm.mondayFourth"></el-input>
        </el-form-item>
        <el-form-item label="第五节课">
          <el-input v-model="addUserForm.mondayFifth"></el-input>
        </el-form-item>
        <!-- 周二课程 -->
        <el-divider class="day">周二</el-divider>
        <el-form-item label="第一节课">
          <el-input v-model="addUserForm.tuesdayFirst"></el-input>
        </el-form-item>
        <el-form-item label="第二节课">
          <el-input v-model="addUserForm.tuesdaySecond"></el-input>
        </el-form-item>
        <el-form-item label="第三节课">
          <el-input v-model="addUserForm.tuesdayThird"></el-input>
        </el-form-item>
        <el-form-item label="第四节课">
          <el-input v-model="addUserForm.tuesdayFourth"></el-input>
        </el-form-item>
        <el-form-item label="第五节课">
          <el-input v-model="addUserForm.tuesdayFifth"></el-input>
        </el-form-item>
        <!-- 周三课程 -->
        <el-divider class="day">周三</el-divider>
        <el-form-item label="第一节课">
          <el-input v-model="addUserForm.wednesdayFirst"></el-input>
        </el-form-item>
        <el-form-item label="第二节课">
          <el-input v-model="addUserForm.wednesdaySecond"></el-input>
        </el-form-item>
        <el-form-item label="第三节课">
          <el-input v-model="addUserForm.wednesdayThird"></el-input>
        </el-form-item>
        <el-form-item label="第四节课">
          <el-input v-model="addUserForm.wednesdayFourth"></el-input>
        </el-form-item>
        <el-form-item label="第五节课">
          <el-input v-model="addUserForm.wednesdayFifth"></el-input>
        </el-form-item>
        <!-- 周四课程 -->
        <el-divider class="day">周四</el-divider>
        <el-form-item label="第一节课">
          <el-input v-model="addUserForm.thursdayFirst"></el-input>
        </el-form-item>
        <el-form-item label="第二节课">
          <el-input v-model="addUserForm.thursdaySecond"></el-input>
        </el-form-item>
        <el-form-item label="第三节课">
          <el-input v-model="addUserForm.thursdayThird"></el-input>
        </el-form-item>
        <el-form-item label="第四节课">
          <el-input v-model="addUserForm.thursdayFourth"></el-input>
        </el-form-item>
        <el-form-item label="第五节课" >
          <el-input v-model="addUserForm.thursdayFifth"></el-input>
        </el-form-item>
        <!-- 周五课程 -->
        <el-divider class="day">周五</el-divider>
        <el-form-item label="第一节课">
          <el-input v-model="addUserForm.fridayFirst"></el-input>
        </el-form-item>
        <el-form-item label="第二节课">
          <el-input v-model="addUserForm.fridaySecond"></el-input>
        </el-form-item>
        <el-form-item label="第三节课">
          <el-input v-model="addUserForm.fridayThird"></el-input>
        </el-form-item>
        <el-form-item label="第四节课">
          <el-input v-model="addUserForm.fridayFourth"></el-input>
        </el-form-item>
        <el-form-item label="第五节课">
          <el-input v-model="addUserForm.fridayFifth"></el-input>
        </el-form-item>
        <!-- 周六课程 -->
        <el-divider class="day">周六</el-divider>
        <el-form-item label="第一节课">
          <el-input v-model="addUserForm.saturdayFirst"></el-input>
        </el-form-item>
        <el-form-item label="第二节课">
          <el-input v-model="addUserForm.saturdaySecond"></el-input>
        </el-form-item>
        <el-form-item label="第三节课">
          <el-input v-model="addUserForm.saturdayThird"></el-input>
        </el-form-item>
        <el-form-item label="第四节课">
          <el-input v-model="addUserForm.saturdayFourth"></el-input>
        </el-form-item>
        <el-form-item label="第五节课">
          <el-input v-model="addUserForm.saturdayFifth"></el-input>
        </el-form-item>
        <!-- 周日课程 -->
        <el-divider class="day">周日</el-divider>
        <el-form-item label="第一节课">
          <el-input v-model="addUserForm.sundayFirst"></el-input>
        </el-form-item>
        <el-form-item label="第二节课">
          <el-input v-model="addUserForm.sundaySecond"></el-input>
        </el-form-item>
        <el-form-item label="第三节课">
          <el-input v-model="addUserForm.sundayThird"></el-input>
        </el-form-item>
        <el-form-item label="第四节课">
          <el-input v-model="addUserForm.sundayFourth"></el-input>
        </el-form-item>
        <el-form-item label="第五节课">
          <el-input v-model="addUserForm.sundayFifth"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 课表弹框区域 -->
    <el-dialog
      title="课表"
      :visible.sync="dialogVisible"
      width="80%"
      v-if="dialogVisible"
      class="Class-dialog"
    >
      <span>姓名:{{name}}</span>
      <span>职工号:{{id}}</span>
      <TimeTable></TimeTable>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as mockApi from '../../api/api.js'
import TimeTable from "./Timetable/TimeTable.vue"

export default {
  data (){
    return {
      //班级列表
      classList: [],
      //专业方向
      direction: '',
      //课程列表
      courseList: [],
      //班级名称
      className: '',
      //装当前所选行的专业数据
      rowCourseList:[],
      totle: 0,
      //当前所选行
      row:[],
      //对话框
      dialogVisible: false,
      //课程列表
      classs:[],
      id:'',
      name:'',
      // 添加用户对话框
      addDialogVisible: false,
      // 用户添加
      addUserForm: {
        name: '',
        studentId: '',
        idNumber: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 获取用户列表查询参数对象
      queryInfo: {
        query: '',
        // 当前页数
        pagenum: 1,
        // 每页显示多少数据
        pagesize: 5
      },
      // 所有角色数据列表
      rolesLsit: [],
      // 已选中的角色Id值
      selectRoleId: '',
      // 用户添加表单验证规则
      addCourseFormRules: {
        //教师姓名
        className: [
          { required: true, message: '请输入班级', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '班级的长度在3～10个字',
            trigger: 'blur'
          }
        ],
        //专业方向
        college:[
          { required: true, message: '请输入专业方向', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '专业方向的长度在3～10个字',
            trigger: 'blur'
          }
        ],
        //课程
        course:[
          { required: true, message: '请输入课程', trigger: 'blur' },
          {
            min: 0,
            max: 25,
            message: '课程的长度在3～10个字',
            trigger: 'blur'
          }
        ],
      },
    }
  },

  created () {
    this.getClassCourseList()
  },

  components: {
    TimeTable
  },

  methods: {

    async getClassCourseList() {
      mockApi.getClassCourseList().then(res => {
        if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
        console.log(res)
        this.classList = res.data.classCourse
        this.totle = res.data.totle

      })
    },

    //获取当前行数据并跳转到课表页面
    checkDetail(val,event){
      this.dialogVisible = true
      this.name = val.className
      // this.id = val.studentId

      //正则获取中文
      let el = event.currentTarget
      var reg = /[\u4e00-\u9fa5]|[0-9]/g;
      let selected = el.innerHTML.match(reg).join("")
      //判断点击的是哪个专业按钮
      for(let i=0;i<val.direction.length; i++){
        //判断按钮对应哪个专业
        if(selected == val.direction[i].name){
          //向vuex添加全局的班级课表列表
          this.$store.dispatch("setStudentClassList",val.direction[i].course)
          break
        }
      }

    },

    // 添加教师
    addUser () {
      // 提交请求前，表单预验证
      this.$refs.addUserFormRef.validate(async valid => {
        // console.log(valid)
        // 表单预校验失败
        if (!valid) return
        const { data: res } = await this.$http.post('users', this.addUserForm)
        if (res.meta.status !== 201) {
          this.$message.error('添加用户失败！')
        }
        this.$message.success('添加用户成功！')
        // 隐藏添加用户对话框
        this.addDialogVisible = false
        this.getTeacherList()
      })
    },

    // 监听 添加用户对话框的关闭事件
    addDialogClosed () {
      this.$refs.addUserFormRef.resetFields()
    },

    //关闭弹框
    closeDialog(){
      this.dialogVisible = false
    },

    // 监听 pagesize改变的事件
    handleSizeChange (newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getClassCourseList()
    },

    // 监听 页码值 改变事件
    handleCurrentChange (newSize) {
      // console.log(newSize)
      this.queryInfo.pagenum = newSize
      this.getClassCourseList()
    },
  }
}
</script>

<style lang="less" scoped>
.day{
  width:100%;
  text-align: center;
  font-size:18px;
  margin-bottom: 10px;
  //font-family:"Microsoft YaHei";
}

.Class-dialog{
  span{
    margin-left: 20px;
    font-size: 18px;
  }
}
</style>
